<script setup lang="ts">
import { onBeforeMount, ref, watch} from "vue";
import TimeShow from "@/pages/time-show/index.vue"
import Kx from "@/pages/kx/index.vue"
import MarketState from "@/pages/market-state/index.vue"
import Nft from "@/pages/nft/index.vue"
import Nftall from "@/pages/nftall/index.vue"
import Nftall2 from "@/pages/nftall2/index.vue"
import Photo from "@/pages/photo/index.vue"
import Photo2 from "@/pages/photo2/index.vue"
import PricePicker from "@/pages/price-picker/index.vue"
import {Img, Newslist} from "@/api/type";
import Setting from "@/pages/setting/index.vue"
import Posts from "@/pages/posts/index.vue"
import Twitter from "@/pages/twitter/index.vue"
import {getImage, getImage2, getNews} from "@/api";
//全屏
import screenfull from 'screenfull'
import {useSettingStore} from "@/store/modle/setting";
//权重列表
const weightSelect: {
  value: string
}[] = [];
//当前时间为早上七点到晚上七点时
const isDay = () => {
  if(settingStore.setting.autoDarkMode){
    const now = new Date();
    const hour = now.getHours();
    if (hour >= 7 && hour <= 19) {
      //获取HTML元素
      settingStore.setting.darkMode = false;
    } else {
      settingStore.setting.darkMode = true;
    }
  }
  //没3秒钟检测一次
  setTimeout(isDay, 3000);
};
const settingStore = useSettingStore()
watch(()=>settingStore.setting.darkMode, (val) => {
  changeMode(val)
})
const changeMode = (val:any)=>{
  if (val) {
    const html = document.querySelector("html");
    html?.classList.add("dark");
  } else {
    const html = document.querySelector("html");
    html?.classList.remove("dark");
  }
}

//权重生成
const weightGenerate = () => {
  weightSelect.splice(0, weightSelect.length);
  for (const key in settingStore.setting.carousel) {
    if (settingStore.setting.carousel.hasOwnProperty(key)) {
      // @ts-ignore
      const element = settingStore.setting.carousel[key]
      if (!element.show) {
        for (let i = 0; i < element.weight; i++) {
          weightSelect.push({
            value: key,
          })
        }
      }
    }
  }
};
//随机展示
const randomShow = () => {
  //生成权重列表
  weightGenerate()
  //随机获取权重列表中的一个
  const random = Math.floor(Math.random() * weightSelect.length)
  //获取权重列表中的一个
  if (weightSelect.length===0){
    return
  }
  const weight = weightSelect[random].value
  //获取权重列表中的一个的页面
  //@ts-ignore
  const page = settingStore.setting.carousel[weight]
  //其他页面隐藏
  for (const key in settingStore.setting.carousel) {
    //@ts-ignore
    settingStore.setting.carousel[key].show = false
  }
  //展示权重列表中的一个的页面
  page.show = true
  //权重列表中的一个的页面停留时间
  const stayTime = page.stayTime
  //权重列表中的一个的页面停留时间后，重新随机展示
  if (timer.value) {
    clearTimeout(timer.value)
  }
  timer.value = setTimeout(randomShow, stayTime * 1000)
};
const timer = ref<any>(null)
onBeforeMount(() => {
  // 获取当前时间
  isDay()
  changeMode(settingStore.setting.darkMode)
  randomShow()
});

watch(() => settingStore.setting.carousel, () => {
  randomShow()
})

const newList = ref<Newslist[]>([])
const getData = () => {
  getNews().then((res) => {
    if (!res||!res.newslist) {
      return
    }
    newList.value = res.newslist as Newslist[]
  })
  setTimeout(getData, 1000*60)
}
onBeforeMount(() => {
  getData()
  getPhotoData()
  getPhotoData2()
})



//数据
const imageList = ref<Img[]>([])
const getPhotoData = () => {
  getImage().then((res) => {
    if (!res) {
      return
    }
    imageList.value = res.imglists as Img[]
  })
  setTimeout(() => {
    getPhotoData()
  }, 2000 * 60)
}
const imageList2 = ref<Img[]>([])
const getPhotoData2 = () => {
  getImage2().then((res) => {
    if (!res) {
      return
    }
    imageList2.value = res.imglists as Img[]
  })
  setTimeout(() => {
    getPhotoData2()
  }, 1000*60)
}



//全屏
const isFullScreen = ref(false)
const main = ref<HTMLDivElement>()
const full = () => {
  if (screenfull.isEnabled) {
    //如果是全屏状态
    if (isFullScreen.value) {
      //退出全屏
      screenfull.exit()
      isFullScreen.value = false
    } else {
      //进入全屏
      screenfull.request(main.value)
      isFullScreen.value = true
    }
  } else {
    console.log('不支持全屏');
  }
}
const isShowSetting = ref(false)

</script>

<template>
  <div v-show="!isShowSetting" ref="main" @click="randomShow">
    <div class="absolute z-20 h-32 w-32 right-0 top-0" @click.stop="full"></div>
    <div @click.stop="isShowSetting=true"  class="absolute z-40 h-32 w-32 left-0 top-0"/>
    <div v-show="settingStore.setting.carousel.timeShow.show">
      <time-show/>
    </div>
    <div v-if="settingStore.setting.carousel.kx.show">
      <kx :news-list="newList"/>
    </div>
    <div v-show="settingStore.setting.carousel.marketState.show">
      <market-state/>
    </div>
    <div v-show="settingStore.setting.carousel.nft.show">
      <nft/>
    </div>
    <div v-show="settingStore.setting.carousel.nftall.show">
      <nftall/>
    </div>
    <div v-show="settingStore.setting.carousel.nftall2.show">
      <nftall2/>
    </div>
    <div v-if="settingStore.setting.carousel.photo.show">
      <photo :imageList="imageList" msg="tet"/>
    </div>
    <div v-show="settingStore.setting.carousel.pricePicker.show">
      <price-picker/>
    </div>
    <div v-if="settingStore.setting.carousel.photo2.show">
      <photo2 :image-list="imageList2"/>
    </div>
    <div v-show="settingStore.setting.carousel.posts.show">
      <posts/>
    </div>
    <div v-if="settingStore.setting.carousel.twitter.show">
      <twitter/>
    </div>
  </div>
  <setting @exit="isShowSetting=false" v-if="isShowSetting"/>
</template>
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
